<template>
	<view class="p-2">
			   <view class="flex align-center justify-between">
				   <view class="flex align-center"> 
					<view><image class="border-circle" @click="openSelf" :src="item.sysUser.avatar" style="width: 65rpx;height: 65rpx;"lazy-load></image></view>
					<view class="ml-2">
						<view class="font">{{item.sysUser.userName}}</view>
						 <text class="font-sm text-light-muted">{{item.createTime}}</text>
					</view>
					</view>
					<view class="flex align-center justify-center rounded bg-main text-white animated" 
					style="width:90rpx;height:50rpx;" hover-class="pulse"  >
							<text  v-if="!item.flag" @click="joinEvent(item.eventId)">加入</text>
							<text  v-else-if="this.loginStatus && item.flag" @click="exitEvent(item.eventId)">退出</text>
					</view>
			   </view>
			
			   <view style="font-size: 30rpx;margin: 10rpx; " class="text-wrapper" @click="openDetail">
			   		{{item.theme}}   
			   </view>
			   <image class="rounded w-100" v-if="item.picture" :src="item.picture" style="height: 350rpx;" @click="openDetail"></image>
			   <view class="flex align-center">
			   		<view class="flex align-center justify-center flex-1" >
						<text class="iconfont icon-huabanfuben ">人数：</text>
						<text>{{item.personNumber}} </text>
						</view>
						<view class="flex align-center justify-center flex-1" >
						<text class="iconfont icon-didian ">地点：</text>
						<text>{{item.location}} </text>
						</view>
						<view class="flex align-center justify-center flex-1" >
						<text class="iconfont icon-leimupinleifenleileibie ">类型：</text>
						<text >{{item.type}} </text>
						</view>
					</view>	   
			   </view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		props:{
			item:Object,
			index:Number
		},
        computed:{
        	...mapState({
        		loginStatus:state=>state.loginStatus
        	})
        },
		methods:{
			openSelf(){
				console.log("进入个人页面");
			},
			joinEvent(e){
				if(this.loginStatus)
				{
					this.$R.post('/meet/event/join',{eventId:e}).then(res=>{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
							uni.$emit('updateIndex')
					
					})
				}else{
					uni.showToast({
						title:'请先登录',
						icon:'none'
					})
				}
			},
			exitEvent(e){
				this.$R.post('/meet/event/exit',{eventId:e}).then(res=>{
				
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						uni.$emit('updateIndex')
					
				})
			},
			openDetail(){
			  uni.navigateTo({
			  	url:"../../pages/home/detail/detail?detail="+JSON.stringify(this.item),
			  })
			}
		}
		
	}
</script>

<style>

</style>
